<template>
	<div class="search-box">
		<el-input v-model="query.key" placeholder="标题" class="search-input mr10" clearable></el-input>
		<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
	</div>
	<div class="image-container">
		<div class="epc-card" v-for="(item, index) in tableData" @click="choose(item)">
			<el-card style="width: 400px;max-height: 500px;">
				<template #header>{{ item.title }}</template>
				<img :src="item.resourceUrl" style="width: 100%" />
			</el-card>
		</div>
		<div class="pagination">
			<el-pagination background layout="total, prev, pager, next" :current-page="query.page"
				:page-size="query.size" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
		</div>
	</div>

</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import image from '../api/image'
import { Search } from '@element-plus/icons-vue';

const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);

interface TableItem {
	id: number;
	title: string;
	resourceUrl: string;
	des: string;
	publishTime: string;
	updateTime: string;
}

const query = reactive({
	key: '',
	page: 1,
	size: 6
});

const getData = () => {
	image.selectPages(query, (res) => {
		if (res.code === 200) {
			console.log(res)
			tableData.value = res.data.list;
			pageTotal.value = Number(res.data.total) || 50;
		}
	});
};

getData();

const props = defineProps({
	update: {
		type: Function,
		required: true
	},
  updateTable:{
    type: Function,
    required: true
  }

});

const choose = (item) => {
	props.update(item, props.updateTable);
}

// 查询操作
const handleSearch = () => {
	query.page = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.page = val;
	getData();
};

</script>

<style>
.search-box {
	margin-bottom: 20px;
}

.search-input {
	margin-right: 10px;
	width: 500px;
}

.image-container {
	width: 100%;
	max-height: 900px;

	.epc-card {
		cursor: pointer;
		overflow: hidden;
		display: inline-block;
	}
}
</style>
